<h2>Product Content:</h2>
<div id="image_wrap">
    <div class="main">
        <div class="head"><a href="javascript:;" onclick="add_main_img();">Add a main Image</a></div>
        <div id="main_img_wrap" class="body"></div>
    </div>
    <div class="htu">
        <div class="head"><a href="javascript:;" onclick="add_htu_img();">Add a how-to-use Image</a></div>
        <div id="htu_img_wrap" class="body"></div>
    </div>
</div>
<div id="product_content">
    <?php m('html')->block_richtext(array('element_name' => 'content', 'element_value' => $this->get_data('content')))->display();?>
</div>
<div class="clear"></div>
<script type="text/javascript">
var main_img_wrap = z.s('main_img_wrap');
var htu_img_wrap = z.s('htu_img_wrap');



<?php if ($this->get_data('images')): ?>
    <?php foreach ($this->get_data('images') as $key => $sub_images): ?>
    <?php foreach ($sub_images as $image):?>
        <?php if ($key == 'main'): ?>
        main_img_wrap.appendChild(create_image('<?php echo $image['key'];?>', '<?php echo $image['src'];?>', '<?php echo $image['id'];?>'));
        <?php elseif ($key == 'htu'):?>
        htu_img_wrap.appendChild(create_image('<?php echo $image['key'];?>', '<?php echo $image['src'];?>', '<?php echo $image['id'];?>'));
        <?php endif;?>
    <?php endforeach; ?>
    <?php endforeach;?>
<?php endif;?>

function add_main_img() {
    cdn.show(null, function () {
        //var src = z.cdn_url(this.img_cdn_path);
        var img = create_image('main', this.img_cdn_path);
        
        main_img_wrap.appendChild(img);
        this.hide();
        //form_add('thumbnail', this.img_cdn_path);
    });
    cdn.set_pos(360, 200);
}

function add_htu_img() {
    cdn.show(null, function () {
        //var src = z.cdn_url(this.img_cdn_path);
        var img = create_image('htu', this.img_cdn_path);
        
        htu_img_wrap.appendChild(img);
        this.hide();
        //form_add('thumbnail', this.img_cdn_path);
    });
    cdn.set_pos(360, 250);
}

function create_image(key, cdn_path, id, attribute) {
    var div = document.createElement('div');
    div.className = 'item inline-block';
    
    var a = document.createElement('a');
    a.href = 'javascript:;';
    a.innerHTML = 'remove';
    div.appendChild(a);
    a.onclick = function () {
        var _div = this.parentNode;
        var _wrap = _div.parentNode;
        _wrap.removeChild(_div);
        if (id > 0) {
            var _hidden = document.createElement('input');//'delete_image_ids';
            _hidden.type = 'hidden';
            _hidden.name = 'delete_image_ids[]';
            _hidden.value = id;
            _hidden.changed = true;
            _wrap.appendChild(_hidden);
        }
    };
    //var src = z.cdn_url(this.cdn_img_path);
    var src = z.cdn_url(cdn_path);
    var img = document.createElement('img');
    img.src = src;
    for (var key in attribute) {
        img[key] = attribute[key];
    }
    div.appendChild(img);

    var hidden = document.createElement('input');
    hidden.name = 'src[' + key + '][]';
    hidden.type = 'hidden';
    hidden.value = cdn_path;
    if ( ! id)
        hidden.changed = true;
    div.appendChild(hidden);
    
    return div;
}
</script>